<template>
  <div class="contain">
    <uni-nav-bar
      :border="false"
      backgroundColor="transparent"
      statusBar
      color="white"
      title="学习"
      fixed
    >
      <template v-slot:left>
        <!-- 在这里放置左侧的自定义内容，比如返回按钮或其他内容 -->
        <image
          @click="sweep"
          class="sweep"
          src="/static/images/study/sweep.png"
        />
      </template>
    </uni-nav-bar>
    <!-- 内容 -->
    <div class="mainContain">
      <!-- 上次学到 -->
      <div class="lastLearning" v-if="lastTime && lastTime.courseName">
        <div class="title">上次学到</div>
        <div class="content">
          <!-- 课程信息 -->
          <div class="content_top flex">
            <image :src="lastTime.coursePic" class="cover" />
            <div class="info">
              <div class="name overtxt">
                {{ lastTime.courseName }}
              </div>
              <div class="chapterName overtxt">
                {{ lastTime.chapterName }}
              </div>
              <div class="taskName overtxt">
                {{ lastTime.taskName }}
              </div>
            </div>
          </div>
          <!-- 时间 继续学习 -->
          <div class="content_bottom flexbet">
            <div class="flex">
              <image class="icon" src="/static/images/study/time.png" />
              <div class="lable">{{ lastTime.startTime }}</div>
            </div>
            <div class="study" @click="continueToLearn">继续学习</div>
          </div>
        </div>
      </div>
      <van-empty
        v-if="waiting.length == 0 && learning.length == 0"
        description="暂无课程"
      />
      <uni-collapse>
        <!-- 学习中的课程 -->
        <uni-collapse-item
          v-if="learning.length > 0"
          title="学习中的课程"
          :open="true"
        >
          <div
            @click="toCourseDetail(item)"
            class="card_course flex"
            v-for="(item, index) in learning"
            :key="index"
          >
            <image class="cover" :src="item.coursePic" />
            <!--基本信息 -->
            <div class="baseInfo">
              <div class="baseInfo_name overtxt">
                {{ item.courseName }}
              </div>
              <div class="baseInfo_data flex">
                <image
                  class="icon"
                  src="/static/images/teaching/stu_icon.png"
                />
                <div class="value overtxt">
                  {{ item.teacherNames }}
                </div>
                <image
                  class="icon"
                  src="/static/images/teaching/task_icon.png"
                />
                <div class="value overtxt">
                  {{ item.finishTasks ? item.finishTasks : 0 }}/{{
                    item.allTasks ? item.allTasks : 0
                  }}
                </div>
                <image
                  class="icon"
                  src="/static/images/teaching/exam_icon.png"
                />
                <div class="value overtxt">
                  {{ item.finishExams ? item.finishExams : 0 }}/{{
                    item.allExams ? item.allExams : 0
                  }}
                </div>
              </div>
              <!-- 学习进度 -->
              <div class="flex progressbox">
                <div class="lable">学习进度</div>
                <div class="progress rela">
                  <div
                    class="progress_bar abso"
                    :style="{ width: item.percentage }"
                  ></div>
                </div>
                <div class="value">{{ item.percentage }}</div>
              </div>
            </div>
          </div>
          <div style="height: 20rpx"></div>
        </uni-collapse-item>
        <!-- 待学习课程 -->
        <uni-collapse-item
          v-if="waiting.length > 0"
          title="待学习课程"
          :open="true"
          :key="index"
        >
          <div
            @click="toCourseDetail(item)"
            v-if="waiting.length > 0"
            class="card_course flex"
            v-for="(item, index) in waiting"
            :key="index"
          >
            <image class="cover" :src="item.coursePic" />
            <!--基本信息 -->
            <div class="baseInfo">
              <div class="baseInfo_name overtxt">
                {{ item.courseName }}
              </div>
              <div class="baseInfo_data flex">
                <image
                  class="icon"
                  src="/static/images/teaching/stu_icon.png"
                />
                <div class="value overtxt">1/1</div>
                <image
                  class="icon"
                  src="/static/images/teaching/task_icon.png"
                />
                <div class="value overtxt">xxxxxxxxxxx</div>
                <image
                  class="icon"
                  src="/static/images/teaching/exam_icon.png"
                />
                <div class="value overtxt">xxxxxxxxxxxx</div>
              </div>
              <!-- 学习进度 -->
              <div class="flex progressbox">
                <div class="lable">学习进度</div>
                <div class="progress rela">
                  <div
                    class="progress_bar abso"
                    :style="{ width: item.percentage }"
                  ></div>
                </div>
                <div class="value">{{ item.percentage }}</div>
              </div>
            </div>
          </div>
        </uni-collapse-item>
      </uni-collapse>
    </div>
  </div>
</template>
  
<script>
import { learningCourseList } from "@/common/api/course.js";
export default {
  name: "index",
  data() {
    return {
      activeNames: [],
      waiting: [],
      learning: [],
      lastTime: {},
      safeTop: 0,
      pxtorpx: 0,
      statusBarHeight: "",
      navigationBarHeight: "",

      lableConfig: "",
      exapnd: true,
    };
  },
  onReady() {
    this.lableConfig = getApp().globalData.$lableConfig;
    this.statusBarHeight = getApp().globalData.$statusBarHeight;
    this.navigationBarHeight = getApp().globalData.$navigationBarHeight;
    this.safeTop = getApp().globalData.$safeTop;
    this.pxtorpx = getApp().globalData.$pxtorpx;
  },
  onShow() {
    this.getList();
  },
  methods: {
    /* 继续学习按钮 */
    continueToLearn() {
      uni.navigateTo({
        url: `/pages/selectiCourse/task?taskId=${this.lastTime.taskId}&orderCourseId=${this.lastTime.orderCourseId}&courseStuId=${this.lastTime.courseStuId}`,
      });
    },
    /* 查看课程详情 */
    toCourseDetail(item) {
      uni.navigateTo({
        url: `/pages/selectiCourse/courseDetail?orderCourseId=${item.orderCourseId}&type=study`,
      });
    },
    /* 扫一扫 */
    sweep() {
      // 在需要调用扫一扫功能的方法中调用wx.scanCode
      uni.getProvider({
        service: "oauth",
        success: function (res) {
          if (res.provider.indexOf("weixin")) {
            wx.scanCode({
              success: function (res) {
                console.log(res);
                // 处理扫码结果
              },
              fail: function (error) {
                console.log(error);
                // 处理扫码失败情况
              },
            });
          } else {
            console.log("请在微信环境中使用扫一扫功能");
          }
        },
      });
    },
    /* 获取学习中列表 */
    async getList() {
      uni.showLoading({ mask: true, title: "加载中" });
      let res = await learningCourseList(uni.getStorageSync("stuId"));
      this.learning = res.data.learning;
      this.lastTime = res.data.lastTime;
      this.waiting = res.data.waiting;
    },
    collapseChange(e) {
      this.activeNames = e.detail;
    },
  },
};
</script>

<style scoped lang='scss'>
::v-deep .uni-collapse-item__title-arrow text {
  display: none;
}

::v-deep .uni-collapse-item__title-arrow::after {
  content: "";
  width: 30rpx;
  height: 30rpx;
  background-image: url(../../static/images/study/expand.png);
}
::v-deep .uni-collapse-item__title-box {
  padding: 0 !important;
  font-size: 32rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  color: #333333;
  height: 92rpx;
}

::v-deep .uni-collapse-item__title-arrow {
  margin-right: 0;
}
::v-deep .uni-collapse-item__title {
  border-bottom: none !important;
}
::v-deep .uni-collapse-item__wrap-content {
  border-bottom: none !important;
}

.card_course {
  box-sizing: border-box;
  padding: 32rpx 20rpx 32rpx 20rpx;
  width: 686rpx;
  background: white;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  .cover {
    background: #eaedef;
    width: 216rpx;
    height: 136rpx;
    border-radius: 16rpx;
  }
  .baseInfo {
    margin-left: 20rpx;
    .progressbox {
      margin-top: 42rpx;
      .lable {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 34rpx;
      }
      .progress {
        margin: 12rpx 22rpx 0 20rpx;
        width: 175rpx;
        height: 8rpx;
        background: #ebebeb;
        border-radius: 6rpx;
        .progress_bar {
          height: 8rpx;
          background: linear-gradient(270deg, #f76b1c 0%, #fad961 100%);
          border-radius: 6rpx;
        }
      }
      .value {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #f85314;
        line-height: 34rpx;
      }
    }
    .baseInfo_name {
      width: 410rpx;
      font-size: 30rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 42rpx;
    }
    .baseInfo_data {
      margin-top: 18rpx;
      .icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 2rpx;
      }
      .value:last-of-type {
        margin-right: 0;
      }
      .value {
        margin-right: 8rpx;
        width: 96rpx;
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 32rpx;
      }
    }
  }
}

.CollapseTitle {
  height: 44rpx;
  .lable {
    font-size: 32rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 44rpx;
  }
  .icon {
    transition: all 0.5s;
    margin: 6rpx 0 0 0;
    width: 32rpx;
    height: 32rpx;
  }
  .packup {
    // css旋转180度
    transform: rotate(180deg);
  }
}
.sweep {
  margin-left: 20rpx;
  width: 48rpx;
  height: 48rpx;
}
//   上次学到
.lastLearning {
  margin-bottom: 40rpx;
  padding: 22rpx 0 0 0;
  .title {
    font-size: 32rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    line-height: 44rpx;
  }
  // 课程信息
  .content {
    margin-top: 32rpx;
    width: 686rpx;
    height: 264rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 74, 88, 0.1);
    border-radius: 32rpx;
    box-sizing: border-box;
    padding: 32rpx 20rpx 0 20rpx;
    .content_top {
      .cover {
        display: block;
        width: 216rpx;
        height: 136rpx;
        background: #eaedef;
        border-radius: 17rpx;
      }
      .info {
        width: 400rpx;
        margin-left: 24rpx;
        .name {
          font-size: 30rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 42rpx;
        }
        .chapterName {
          margin-top: 16rpx;
          font-size: 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 34rpx;
        }
        .taskName {
          margin-top: 8rpx;
          font-size: 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 34rpx;
        }
      }
    }
    .content_bottom {
      .icon {
        margin: 34rpx 0 0 0;
        width: 32rpx;
        height: 32rpx;
      }
      .lable {
        margin: 32rpx 0 0 2rpx;
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 34rpx;
      }
      .study {
        @include btn_plain_line(
          linear-gradient(140deg, #ff4d03 0%, #ff9a00 100%),
          #ffffff,
          #ff9a00
        ) {
          margin: 20rpx 0 0 2rpx;
          width: 160rpx;
          height: 56rpx;

          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 56rpx;
          text-align: center;
        }
      }
    }
  }
}
::v-deep .uni-navbar__content {
  background: url("https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/indexbg.png") !important;
  background-size: 100% auto !important;
  position: relative;
}
.contain {
  background: url("https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/indexbg.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #f6f7f8;
  min-height: 100vh;
  .mainContain {
    box-sizing: border-box;
    padding: 38rpx 32rpx 0 32rpx;
  }

  .bg {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 750rpx;
  }
}

.notify {
  width: 100%;
  background: red;
}
</style>